/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/02
 *@description  affix  component   Affix图钉组件
 */
/**
 * #item
 *
 * @type        aty-affix
 * @cn          图钉
 * @menu        工具
 * @stPlugin    true
 * @stContainer true
 */
import config from '../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-affix'
// module
const module = {
  name: prefixCls,
  props: {
    /**
     * #property
     *
     * @name    offsetTop
     * @cn      顶部偏移量
     * @type    number
     * @bind    must
     * @value  0
     * @description 距离窗口顶部达到指定偏移量后触发
     */
    offsetTop: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name    offsetBottom
     * @cn      底部偏移量
     * @type    number
     * @bind    must
     * @description 距离窗口底部达到指定偏移量后触发
     */
    offsetBottom: {
      type: Number
    }
  },
  data () {
    return {
      affix: false,
      styles: {},
      slot: false,
      slotStyle: {}
    }
  },
  computed: {
    offsetType () {
      let type = 'top'
      if (this.offsetBottom >= 0) {
        type = 'bottom'
      }
      return type
    },
    classes () {
      return [
        {
          [`${prefixCls}`]: this.affix
        }
      ]
    }
  },
  methods: {
    handleScroll () {
      const affix = this.affix
      const scrollTop = Artery.getScroll(window, true)
      const elOffset = Artery.getOffset(this.$el)
      const windowHeight = window.innerHeight
      const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight

      // Fixed Top
      if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
        this.affix = true
        this.slotStyle = {
          width: this.$refs.point.clientWidth + 'px',
          height: this.$refs.point.clientHeight + 'px'
        }
        this.slot = true
        this.styles = {
          top: `${this.offsetTop}px`,
          left: `${elOffset.left}px`,
          width: `${this.$el.offsetWidth}px`
        }
        /**
         * #event
         *
         * @name    change
         * @cn     状态改变时事件
         * @body
         * @description   在固定状态发生改变时触发，返回值true|false
         */
        this.$emit('change', true)
      } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
        this.slot = false
        this.slotStyle = {}
        this.affix = false
        this.styles = null
        this.$emit('change', false)
      }

      // Fixed Bottom
      if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) &&
                this.offsetType == 'bottom' && !affix) {
        this.affix = true
        this.styles = {
          bottom: `${this.offsetBottom}px`,
          left: `${elOffset.left}px`,
          width: `${this.$el.offsetWidth}px`
        }
        this.$emit('change', true)
      } else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) &&
                this.offsetType == 'bottom' && affix) {
        this.affix = false
        this.styles = null
        this.$emit('change', false)
      }
    }
  },
  mounted () {
    Artery.on(window, 'scroll', this.handleScroll)
    Artery.on(window, 'resize', this.handleScroll)
    // 默认触发一次
    this.handleScroll()
  },
  beforeDestroy () {
    Artery.off(window, 'scroll', this.handleScroll)
    Artery.off(window, 'resize', this.handleScroll)
  }
}
export default module
